<template>
    <l-layout class="l-tab-page" >
        <l-panel style="padding:0;">
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input placeholder="请输入主题" @keyup.enter.native="handleSearch"  v-model="keyWord" size="mini" >
                        <el-button @click="handleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns @click="handleAdd()"  :btnText="$t('写邮件')">
                </l-tool-btns>
            </template>
            <l-table ref="mainTable" 
                :loading="tableLoading" 
                :columns="lr_getPageColumns(columns)" 
                :dataSource="tableData"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"
                @loadPageData="turnTablePage"
                >
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <!--表单-->
        <l-dialog :title="$t('发送邮件')"
                  :visible.sync="formVisible"
                  :height="600"
                  :width="800"
                  @close="handleCloseForm"
                  ref="dialog"
                  >
            <my-form ref="form"></my-form>
            <template #btns >
                <el-button size="mini" type="warning" @click="saveDrafts" >{{$t('保存草稿')}}</el-button>
                <el-button size="mini" type="primary" @click="sendEmail" >{{$t('发送')}}</el-button>
            </template>
        </l-dialog>


        <l-dialog :title="$t('查看邮件')"
            :visible.sync="lookFormVisible"
            :height="600"
            :width="800"
            @close="handleCloseLookForm"
            @opened="handleOpenedForm"
            :hasBtns="false"
            >
            <look-form ref="lookForm"></look-form>
        </l-dialog>

        <l-dialog :title="$t('查看邮件')"
            :visible.sync="lookFormVisible2"
            :height="600"
            :width="800"
            @close="handleCloseLookForm2"
            @opened="handleOpenedForm2"
            :hasBtns="false"
            >
            <inbox-form ref="inboxForm"></inbox-form>
        </l-dialog>
    </l-layout>
</template>
<script>
const api = window.$api.oa.email
import MyForm from './form'
import lookForm from './lookForm'
import inboxForm from './inboxForm.vue'
export default {
    components: {
        MyForm,
        lookForm,
        inboxForm
    },
    data() {
        return {
            // 查询参数
            keyWord:'',

            // 表格参数
            tableLoading: false,
            tableData:[],
            tableTotal:0,
            tableCurrentPage:1,
            tablePageSize:50,
            columns: [
                {label:'发送人',prop:'f_SenderName',width:160,align:'left'},
                {label:'主题',prop:'f_Theme',minWidth:120,align:'left'},
                {label:'时间',prop:'f_CreateDate',width:160,align:'left',dataType:'datetime'},
            ],
            tableBtns:[
                {prop:'Look',label:'查看'},
                {prop:'Delete',label:'彻底删除',width:64},
            ],

            // 表单参数
            formVisible:false,

            formEditRow:null,
            lookFormVisible:false,

            lookFormVisible2:false,
        };
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.loadTableData()
        },
        handleSearch(){
            this.loadTableData()
        },
        turnTablePage({rows}){
            this.tablePageSize = rows
            this.loadTableData(true)
        },
        async loadTableData(isNotFirst){
            if(!isNotFirst){
                this.tableCurrentPage = 1
            }
            this.tableLoading = true
            const queryData = {}
            queryData.type = 4
            queryData.keyword = this.keyWord
            queryData.rows = this.tablePageSize
            queryData.page = this.tableCurrentPage
            queryData.sidx = 'F_CreateDate DESC'
            let data = await this.$awaitWraper(api.getPage(queryData))
            if(data != null){
                this.tableData = data.rows
                this.tableTotal = data.records
            }
            else{
                this.tableData = []
            }
            this.tableLoading = false
        },
        handleAdd(){
            this.handleShowForm('发送邮件')
        },
        handleDelete($index,row){
            this.$confirm(this.$t('此操作将永久删除数据, 确定是否继续?'), this.$t('提示'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
            }).then(async () => {
                this.tableData.splice($index,1);
                this.tableTotal--;
                api.cremove(row.f_ContentId,row.f_EnabledMark == 1?1:3)
                this.$message({
                    type: 'success',
                    message: this.$t('删除成功!')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('已取消删除!')
                })
            })
        },
        handleShowForm() {
            this.formVisible = true;
        },


        //保存草稿    
        async saveDrafts(){
            this.$refs.dialog.showLoading('保存草稿中')
            const postData = this.$refs.form.getForm();
            postData.content.f_sendState = 0
            const res = await this.$awaitWraper(api.add(postData))
            if(res){
                this.$message({
                    type: 'success',
                    message: this.$t('草稿保存成功!')
                })
                this.formVisible = false
            }
            this.$refs.dialog.hideLoading()
        },
        // 发送邮件
        async sendEmail(){
            this.$refs.dialog.showLoading('发送邮件中')
            if (await this.$refs.form.validateForm()) {
                const postData = this.$refs.form.getForm()
                postData.content.f_sendState= 1
                const res = await this.$awaitWraper(api.add(postData))
                if(res){
                    this.$message({
                        type: 'success',
                        message: this.$t('邮件发送成功!')
                    })
                    this.formVisible = false
                }
            }
            this.$refs.dialog.hideLoading()
        },
        handleCloseForm() {
            this.$refs.form.resetForm();
        },

        handleLook($index,row){
            this.formEditRow = row
            if(row.f_EnabledMark == 0){
                this.lookFormVisible = true
            }
            else{
                this.lookFormVisible2 = true
            }
           
        },
        handleCloseLookForm() {
            this.$refs.lookForm.resetForm();
        },
        async handleOpenedForm() {
           let data = await this.$awaitWraper(api.get(this.formEditRow.f_ContentId))
            if(data){
                this.$refs.lookForm.setForm(data)
            }
        },

        handleCloseLookForm2() {
            this.$refs.inboxForm.resetForm();
        },
        async handleOpenedForm2() {
           let data = await this.$awaitWraper(api.get(this.formEditRow.f_ParentId))
            if(data){
                this.$refs.inboxForm.setForm(data)
            }
        },
    }
}
</script>